<template>
    <ul class="Goodsul">
        <li class="Goodsli" v-for="item in List" :key="item.id">
            <label class="container">
                <input type="checkbox" @change="Single($event, item)" :checked="item.isChecked" ><!--:value="item.id" v-model="arr"-->
                <div class="checkmark"></div>
            </label>
            <div class="content">
                <div class="imgdiv">
                    <img :src="item.product" />
                </div>
                <div class="price">
                    <p>{{ item.name }}</p>
                    <div class="bottomdiv">
                        <span><i class="iconfont icon-Icon_jine"></i>{{ item.price }}</span>
                        <div class="btndiv">
                            <button :disabled="item.isDisabled" class="iconfont icon-quchu" @click="add(item)"></button>
                            <div>{{ item.count }}</div>
                            <button class="iconfont icon-tianjia" @click="sub(item)"></button>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</template>

<script>
export default {
    name: 'CartList',

    data() {
        return {
            isChecked: false,
            arr: [],
            empty: [],
            flag: false,
            isDisabled: false,
            money: 0


        };
    },
    props: ["List"],
    mounted() {
        this.$bus.$on("allChecked", this.changeChecked)
    },

    methods: {
        sub(item) {
            item.count++
            item.isDisabled = false
            item.totalMoney = +item.price.split(" ")[0] * item.count
        },
        add(item) {
            item.count--
            item.totalMoney = +item.price.split(" ")[0] * item.count
            if (item.count == 0) {
                item.isDisabled = true
            } else {
                item.isDisabled = false
            }
        },
        changeChecked(value) {

            // value ? this.isChecked = true : this.isChecked = false
            // if (value) {
            //     this.$props.List.forEach((item) => {
            //         // this.arr.push(item.id)
            //         item.isChecked = true
            //     });
            // } else {
            //     this.arr = []
            // }



        },


        Single(e, item) {
            item.isChecked ? item.isChecked = false : item.isChecked = true
            e.preventDefault()
            if (this.arr.length == this.$props.List.length) {
                this.$bus.$emit("changeAll")
                this.flag = true
            } else {

                // 优化 当两个数组长度不等于发布事件总线,将全选取消
                //  只执行一次,第二次为false,不执行
                if (this.flag) {
                    this.flag = false
                    this.$bus.$emit("Cancel")
                }

            }


            // if (this.arr.includes(item.id)) {
            //     //    this.money += +item.price.split(" ")[0]
            //     console.log(item);
            //     this.money += item.totalMoney
            //     this.$store.commit("changeMoney", this.money)

            // } else {
            //     this.money -= item.totalMoney
            //     this.$store.commit("changeMoney", this.money)

            // }

        }
    },
    computed: {
        listData() {
            return this.$props.List
        }
    },

    watch: {
        listData: {
            deep: true,
            handler(newV, oldV) {
                let res = 0
                newV.forEach(item => {
                    if(item.isChecked){
                        res += item.totalMoney
                    };
                })
                this.money = res
                this.$store.commit("changeMoney",this.money)
            }
        }
    }

    // computed: {
    //     allIsChecked(){
    //         console.log(this.arr);
    //     }
    // }
};
</script>

<style lang="less" scoped>
.Goodsul {
    height: calc(100% - 226px);
    overflow: auto;

    .Goodsli {
        display: flex;
        width: 100%;
        height: 800px;
        padding: 80px 60px;
        position: relative;

        .container {
            height: 100px;
            margin-right: 180px;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }

        .content {
            width: 100%;
            height: 100%;
            display: flex;

            .imgdiv {
                width: 500px;
                height: 100%;

                img {
                    width: 100%;
                }
            }

            .price {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .bottomdiv {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;

                    .btndiv {
                        width: 300px;
                        display: flex;
                        justify-content: space-between;
                        height: 100%;

                        i {
                            width: 88px;
                            height: 88px;
                            background-color: #f2f3f5;
                            text-align: center;
                            line-height: 88px;
                        }

                        div {
                            width: 88px;
                            height: 88px;
                            background-color: #f2f3f5;
                            text-align: center;
                            line-height: 88px;

                        }
                    }
                }
            }

        }
    }
}

/* Hide the default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 66px;
    user-select: none;
}

/* Create a custom checkbox */
.checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 1.3em;
    width: 1.3em;
    background: transparent;
    border-radius: 50px;
    transition: all 0.7s;
    --spread: 80px;
    border: 1px solid gray;
}

/* When the checkbox is checked, add a blue background */
.container input:checked~.checkmark {
    background: rgb(0, 0, 0);
    box-shadow: -10px -10px var(--spread) 0px #5B51D8, 0 -10px var(--spread) 0px #833AB4, 10px -10px var(--spread) 0px #E1306C, 10px 0 var(--spread) 0px #FD1D1D, 10px 10px var(--spread) 0px #F77737, 0 10px var(--spread) 0px #FCAF45, -10px 10px var(--spread) 0px #FFDC80;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 0.45em;
    top: 0.25em;
    width: 0.25em;
    height: 0.5em;
    border: solid #f0f0f0;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
}
</style>